<template>
  <div class="page">
    <!-- 顶部栏 -->
    <van-nav-bar :border="false">
      <template #left>
        <div class="fz-16 fw-bold">{{ $t('期货') }}</div>
      </template>
    </van-nav-bar>

    <div class="container rel pt-0">
      <!-- 钱包信息 -->
      <wallet-comp></wallet-comp>

      <!-- 收益信息 -->
      <div class="flex mt-15 mb-15">
        <div class="bg-box flex-1 click" @click="router.push('/forward/gu')">
          <img style="height: 15px" src="/icon_1.png" />
          <div class="cl-basic mt-10 mb-5">{{ $t('总股权数') }}</div>
          <div class="fw-bold">200.00</div>
        </div>

        <div
          class="bg-box flex-1 mr-10 ml-10 click"
          @click="router.push('/forward/profit')"
        >
          <img style="height: 15px" src="/icon_2.png" />
          <div class="cl-basic mt-10 mb-5">{{ $t('股权收益') }}</div>
          <div class="fw-bold">200.00</div>
        </div>

        <div class="bg-box flex-1">
          <img style="height: 15px" src="/icon_3.png" />
          <div class="cl-basic mt-10 mb-5">{{ $t('收益率') }}</div>
          <div class="fw-bold">200.00</div>
        </div>
      </div>

      <!-- 我的收益 -->
      <div
        class="bg-box p-30 mb-15 click"
        @click="router.push('/forward/withdraw')"
      >
        <div class="flex flex-center mb-15">
          <div class="bg-box" style="padding: 5px 20px">
            {{ $t('我的收益') }}
          </div>
        </div>

        <div class="flex flex-center fz-16 mb-15">
          <div class="cl-basic mr-50">{{ $t('总资产') }}：</div>
          <div class="fw-bold">1000 U</div>
        </div>

        <div class="flex flex-rb">
          <div class="ta-center lh-2">
            <div class="cl-basic">{{ $t('A收益') }}</div>
            <div class="fw-bold">1000 U</div>
            <div class="btn active click">{{ $t('激活矿机') }}</div>
          </div>

          <div class="ta-center lh-2">
            <div class="cl-basic">{{ $t('B收益') }}</div>
            <div class="fw-bold">1000 U</div>
            <div class="btn active click">{{ $t('提取收益') }}</div>
          </div>
        </div>
      </div>

      <!-- 我的邀请链接 -->
      <div class="bg-box mb-15">
        <div class="cl-basic mb-10">{{ $t('我的邀请链接') }}</div>
        <div class="click mb-10" @click="copyString(inviteLink)">
          {{ inviteLink }}
        </div>
        <div class="flex flex-rb">
          <div class="btn active click" @click="router.push('/forward/market')">
            {{ $t('直推') }}
          </div>
          <div class="btn active click" @click="router.push('/forward/market')">
            {{ $t('市场') }}
          </div>
        </div>
      </div>

      <!-- 活动板块 -->
      <div class="bg-box">
        <div class="cl-basic mb-10">{{ $t('活动板块') }}</div>
        <div class="flex flex-rb">
          <div class="btn active click" @click="router.push('/forward/rank')">
            {{ $t('推广排行榜') }}
          </div>
          <div class="btn active click" @click="showToast($t('暂未开启'))">
            {{ $t('幸运抽奖') }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/store/index'
import { showToast, copyString } from 'js/utils'

import walletComp from 'comps/wallet.vue'

const router = useRouter()
const store = useStore()

const tabs = ref([
  $t('待确认订单'),
  $t('待收货订单'),
  $t('已收货订单'),
  $t('购物'),
  $t('期货'),
])
const tabIndex = ref(Number(localStorage.getItem('tabIndex') || '0'))

const inviteLink = ref(`${location.origin}/#/register?inviteId=${fromAddress}`)
</script>

<style lang="scss" scoped>

</style>
